<!--
 * @Author: your name
 * @Date: 2021-07-07 15:38:36
 * @LastEditTime: 2021-07-07 15:42:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /practical-training/src/views/Login.vue
-->
<template>
    <div class="center">
        <div class="box">
            <p class="title">登陆</p><br>
            <span>账号: </span>
            <el-input class="input1" v-model="number" placeholder="请输入账号"></el-input><br>
            <span>密码: </span>
            <el-input class="input2" v-model="password" placeholder="请输入密码" show-password @keyup.enter.native="login()">
            </el-input><br>
            <el-button @click="login()" class="submit" type="primary">确认登陆</el-button>
        </div>
    </div>
</template>


<script>
    import request from '../utils/request.js'
    import api from '../utils/apis.js'
    export default {
        name: 'Login',
        data() {
            return {
                number: '',
                password: ''
            };
        },
        created() {
        },
        methods: {
            login() {
                let data = {
                    password: this.password,
                    username: this.number
                }
                request.post('user/login', data).then(res => {
                    console.log(res)
                    if (res.status === 200) {
                        let token = res.data.token
                        this.$store.commit("setToken", token)
                        this.$router.push({ path: '/home' })
                    }

                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .center{
        margin: 137px auto;
        width: 350px;
    }
    .box {
        width: 350px;
        height: 280px;
        background-color: #fff;
        border-radius: 1%;
        padding: 26px 0 12px 0;
        text-align: center;
    }

    .title {
        font-size: 26px;
        margin-top: 20px;
    }

    .input1 {
        margin-top: 10px;
        width: 220px;
    }

    .submit {
        margin-top: 30px;
    }

    .input2 {
        margin-top: 20px;
        width: 220px;
    }
</style>